<template>
    <c-list-template title="出口申请管理" :operation="true">
        <template slot="search">
            <el-row :gutter="24">
                <el-col :span="6" class="flex-center">
                    <div class="mr-lg">出口申请单号</div>
                    <el-input v-model="querys.id" placeholder="请输入出口申请单号" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="6" class="flex-center ">
                    <div class="mr-lg ">状态</div>
                    <el-select v-model="statusList" class="wh flex-1" collapse-tags multiple placeholder="请选择状态" @change="statusChange">
                        <el-option v-for="item in outApplyStatus" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6" class="flex-center">
                    <div class="mr-lg">供应商名称</div>
                    <el-input v-model="querys.sellerName" placeholder="请输入供应商名称" class="wh flex-1 mr-lg" />
                </el-col>

                <el-col :span="6" class="flex-x-end">
                    <el-button icon="el-icon-search" type="primary" @click="handleSelect">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </template>
        <template slot="list">
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" v-loading="loading">
                <el-table-column label="序号" align="center" width="80" type="index" />
                <el-table-column label="出口申请单号" width="200" align="center" prop="id" />
                <el-table-column label="供应商名称" align="center" prop="sellerName" />
                <el-table-column label="出口国家" align="center" prop="endHarborCountry" />

                <el-table-column label="创建时间" align="center" width="200">
                    <template slot-scope="scope">
                        {{ scope.row.timeCreate | dateYMDHMSFormat }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="状态" width="100" align="center" prop="status" /> -->
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.status == null ? "":outApplyStatus[scope.row.status].label}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" v-if="scope.row.status == 1" @click="handleDetails(scope.row,false)">审核</el-link>
                        <el-link type="primary" v-else @click="handleDetails(scope.row,true)">详情</el-link>
                        <!-- isOutExpenseUploaded  是否显示出口手续添加费用 true:显示 -->
                        <el-link type="primary" v-if="scope.row.status == 4 && scope.row.isOutExpenseUploaded" @click="handleAddExpense(scope.row,1)">添加费用</el-link>
                        <el-link type="primary" v-if="scope.row.status == 6 " @click="handleAddExpense(scope.row,2)">添加费用</el-link>
                        <el-link type="primary" v-if="scope.row.carCancel" @click="handleLogOff(scope.row)">确认车辆注销</el-link>
                        <!-- uploadOutInfo 是否可以上传出口信息 true：可以上传；isPayCustomsEncasement 是否完报关费&装箱费缴费 true：已缴费 -->
                        <el-link type="primary" v-if="scope.row.uploadOutInfo" @click="handleInformation(scope.row)">上传出口信息</el-link>
                        <el-link type="primary" v-if="scope.row.uploadCustoms" @click="handleLetter(scope.row)">上传报关单</el-link>
                        <el-link type="primary" v-if="scope.row.status == 8" @click="handleArrive(scope.row)">确认车辆到港</el-link>

                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :current-page="querys.current" :page-sizes="[10, 20, 50, 100]" :page-size="querys.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </template>
        <c-dealer-form ref="cDealerForm" />
        <c-expense-form ref="cExpenseForm" />
        <c-letter-upload ref="cLetterUpload" />
    </c-list-template>
</template>
<script>
import cExpenseForm from "./components/c-expense-form.vue";
import { outApplyStatus } from "@/utils/status.js";
import cDealerForm from "./components/c-dealer-form.vue";
import cLetterUpload from "./components/c-letter-upload.vue";
export default {
    components: {
        cDealerForm,
        cExpenseForm,
        cLetterUpload
    },
    data () {
        return {
            total: 0,
            outApplyStatus: outApplyStatus,
            tableData: [],
            querys: {
                current: 1,
                size: 10,
                statusList: ""
            },
            loading: false,
            statusList: []
        };
    },
    mounted () {
        this.tableList();
    },
    methods: {
        handleArrive (item) {
            this.$confirm("是否确认车辆到港？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                this.$post({
                    url: "/sellerCarOutApply/arrive/harbor?id=" + item.id,
                }).then(
                    () => {
                        this.$message.success("操作成功");
                        this.tableList()
                        this.loading = false;
                    },
                    () => {
                        this.loading = false;
                    }
                );
            })

        },
        handleLogOff (item) {
            this.$confirm("是否确认注销车辆？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                this.$post({
                    url: "/sellerCarOutApply/carCancel?id=" + item.id,
                }).then(
                    () => {
                        this.$message.success("车辆注销成功");
                        this.tableList()
                        this.loading = false;
                    },
                    () => {
                        this.loading = false;
                    }
                );
            })
        },
        handleLetter (item) {
            let url = "/sellerCarOutApply/uploadCustoms"
            this.$refs.cLetterUpload.handleOpen(item, url);
        },
        handleAddExpense (item, type) {
            this.$refs.cExpenseForm.handleOpen(item, type);
        },
        handleInformation (item) {
            this.$refs.cDealerForm.handleOpen(item);
        },
        handleDetails (item, isView) {
            this.$router.push({
                path: "/exportOrder/details",
                query: {
                    id: item.id,
                    isView: isView
                },
            });
        },
        statusChange () {
            this.querys.statusList = ""
            for (let len = 0; len < this.statusList.length; len++) {
                this.querys.statusList == "" ? this.querys.statusList = this.statusList[len] : this.querys.statusList = this.querys.statusList + "," + this.statusList[len]
            }
        },
        tableList () {
            this.loading = true;
            const params = JSON.parse(JSON.stringify(this.querys));
            const url = "/sellerCarOutApply/page";
            this.$get({ url, params }).then((res) => {
                this.tableData = res.records;
                this.total = res.total * 1;
                this.loading = false;
            });
        },
        handleReset () {
            this.querys = {
                current: 1,
                size: 10,
            };
            this.tableList();
        },
        handleSelect () {
            this.querys.current = 1;
            this.tableList();
        },
        handleSizeChange (val) {
            this.querys.size = val;
            this.tableList();
        },
        handleCurrentChange (val) {
            this.querys.current = val;
            this.tableList();
        },
    },
};
</script>
